<template>
    <!-- 表单设置 -->
    <div class="form-setting">
        <card-pane>
            <template v-slot:title>
                <span class="label">
                    <svg-icon
                        icon-class="font-layout-2-fill"
                        class="font-layout-2-fill"
                    />
                    <span class="text">基础设置</span>
                </span>
            </template>
            <template v-slot:list>
                <div class="list">
                    <base-form
                        :formItems="formItems"
                        :formConfig="formConfig"
                        :formData="formSubmit"
                        @onSelectChange="handelSelectChange"
                        @onInputNumberChange="handelInputNumberChange"
                    />
                </div>
            </template>
        </card-pane>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index.vue'
import CardPane from '../../base/components/cardPane'
import { setFormItemProp } from '@/utils/tool'
export default {
    components: {
        BaseForm,
        CardPane
    },
    data() {
        return {
            // 配置表单的表单项列表
            formItems: [
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择控件宽度',
                        label: '表单尺寸',
                        options: [
                            {
                                label: '默认',
                                value: 'medium'
                            },
                            {
                                label: '较小',
                                value: 'small'
                            },
                            {
                                label: '极小',
                                value: 'mini'
                            }
                        ],
                        prop: 'size',
                        width: 'w-1'
                    }
                ],
                [
                    {
                        ltype: 'select',
                        placeholder: '请选择标签宽度',
                        label: '标签宽度',
                        options: [
                            {
                                label: '自动',
                                value: 'auto'
                            },
                            {
                                label: '自定义',
                                value: 'custom'
                            }
                        ],
                        prop: 'labelWidth',
                        width: 'w-1'
                    }
                ],
                [
                    {
                        ltype: 'inputNumber',
                        label: '标签宽度',
                        prop: 'labelWidthCustom',
                        min: 20,
                        max: 200,
                        width: 'w-1',
                        isShow: false
                    }
                ],
                [
                    {
                        ltype: 'radio',
                        type: 'button',
                        label: '标签对齐',
                        prop: 'labelPosition',
                        width: 'w-1',
                        options: [
                            {
                                label: 'left',
                                disabled: false,
                                name: '左对齐',
                                value: 'left'
                            },
                            {
                                label: 'right',
                                disabled: false,
                                name: '右对齐',
                                value: 'right'
                            }
                        ]
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '必填隐藏*',
                        prop: 'hideRequiredAsterisk'
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '显示校验信息',
                        prop: 'showMessage'
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '行内显示校验信息',
                        prop: 'inlineMessage'
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '显示校验反馈图标',
                        prop: 'statusIcon'
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '规则变化立即校验',
                        prop: 'validateOnRuleChange'
                    }
                ],
                [
                    {
                        ltype: 'switch',
                        label: '禁用所有控件',
                        prop: 'disabled'
                    }
                ]
            ],
            formConfig: {
                size: 'small',
                labelPosition: 'left', // label对齐方式
                labelWidth: '120px'
            },
            formSubmit: {
                // 表单尺寸
                size: 'medium',
                // label宽度
                labelWidth: 'auto',
                // 标签对齐方式
                labelPosition: 'left',
                // 隐藏*
                hideRequiredAsterisk: false,
                // 显示校验信息
                showMessage: true,
                // 行内校验
                inlineMessage: false,
                // 是否在输入框中显示校验结果反馈图标
                statusIcon: false,
                // 是否在 rules 属性改变后立即触发一次验证
                validateOnRuleChange: false,
                // 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
                disabled: false
            }
        }
    },
    watch: {
        formSubmit: {
            handler: function(newVal) {
                this.$bus.$emit('FormConfig', newVal)
            },
            deep: true
        }
    },
    created() {
        console.log('this.formItems', this.formItems)
    },
    methods: {
        /**
         * 下拉选的值发生变化
         * @param {*} data
         */
        handelSelectChange(data) {
            if (data.prop === 'labelWidth') {
                if (data.data === 'custom') {
                    this.formSubmit.labelWidth = 84 + 'px'
                    this.formItems = setFormItemProp(
                        this.formItems,
                        'labelWidthCustom',
                        'isShow',
                        true
                    )
                } else {
                    this.formItems = setFormItemProp(
                        this.formItems,
                        'labelWidthCustom',
                        'isShow',
                        false
                    )
                }
            }
        },
        /**
         * 数字选择框发生变化
         * @param {*} data
         */
        handelInputNumberChange(data) {
            if (data.prop === 'labelWidthCustom') {
                this.formSubmit.labelWidth = data.data + 'px'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.form-setting {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    .list {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: column,
            $justify: flex-start,
            $align: flex-start,
            $flex-1: 1
        );

        padding: $margin-sm;
    }
}
</style>
